<template>
  <el-dialog title="大图查看" :close-on-click-modal="false" :visible.sync="visible">
    <div class="demo-image__error">
      <div class="image-container">
        <img :src="url" alt="大图" class="image"/>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { Upload } from 'element-ui'
import { method } from 'lodash'

import Vue from 'vue'

export default {
  data() {
    return {
      headers: { token: Vue.cookie.get('token') },
      visible: false,
      url: '',

    }
  },
  methods: {
    init(url) {
      this.url=url
      this.visible = true
    },


  }
}
</script>

<style scoped>
.image-container {
  display: flex;
  justify-content: center;  /* 居中显示 */
  align-items: center;      /* 居中显示 */
  height: 400px;            /* 可以根据需求调整高度 */
}

.image {
  max-width: 100%;          /* 图片宽度最大为容器宽度 */
  max-height: 100%;         /* 图片高度最大为容器高度 */
  object-fit: contain;      /* 保持图片比例，防止拉伸 */
}
</style>
